<template>
    <div class="special">
        <ul>
            <li v-for="item in topicArr" :key="item.id">
                <img :src="item.scene_pic_url" alt="" />
                <h2>{{ item.title }}</h2>

                <p>{{ item.subtitle }}</p>

                <span>{{ item.price_info | formatPrice }}</span>
            </li>
        </ul>

        <van-pagination v-model="page" :page-count="2" mode="simple" @change="changePage" />
    </div>
</template>

<script>
import { getTopicList } from '@/utils/https';
console.log(getTopicList);
export default {
    data() {
        return {
            page: 1,
            size: 10,
            totalPages: '',
            topicArr: [],
        };
    },
    created() {
        this.getData();
        console.log(1111);
    },
    methods: {
        changePage() {
            this.getData();
        },
        getData() {
            getTopicList({ page: this.page, size: this.size }).then(res => {
                console.log(res);
                this.totalPages = res.data.data.totalPages;
                this.topicArr = res.data.data.data;
            });
        },
    },
};
</script>

<style lang="less" scoped>
.special {
    padding-bottom: 50px;
    ul {
        li {
            text-align: center;
            font-size: 17px;
            img {
                width: 100%;
                display: block;
            }
            h2 {
                margin: 30px;
            }
            p {
                margin: 30px;
            }
            span {
                margin-bottom: 20px;
                display: block;
                color: #9b0000;
            }
        }
    }
}
</style>
